<!DOCTYPE html>
<html>
  <head>
    <title>${webArea.title}预约</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <link rel="stylesheet" href="${s.base}/mobile/lib/Mdate/needcss/Mdate.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
      <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.css">
      <style type="text/css">
          *, *:before, *:after{
              webkit-box-sizing:content-box;
              box-sizing:content-box;
          }
      </style>
  </head>
  <body>
  <div id="showContent">
      <div class="xyg-comp-list-select">
          <input type="hidden" id="id" value="${webAreaUser.id}" />
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>活动室
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text" value="${webArea.title}" disabled />
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>开始时间
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text" id="startDate" value="${(webAreaUser.startDate?string('yyyy-MM-dd HH:mm:ss'))!''}" placeholder="请选择开始时间" />
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>结束时间
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text" id="endDate" value="${(webAreaUser.endDate?string('yyyy-MM-dd HH:mm:ss'))!''}" placeholder="请选择开始时间" />
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>姓名
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text" id="userName" value="${webAreaUser.userName}" max="12" placeholder="请先填写姓名" />
              </div>
          </div>

          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>手机号
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text"  id="phone" value="${webAreaUser.phone}" maxlength="12" placeholder="请先填写手机号" />
              </div>
          </div>
          <!--<div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>验证码
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <div style="width: 60%;height: auto; float: left; text-align: left;">
                      <input type="text"  id="workAddress" value="${webAreaUser.workAddress}" maxlength="100" placeholder="请先填写工作地址" />
                  </div>
                  <div style="width: 40%;height: auto; float: left; text-align: center;">获取验证码</div>
              </div>
          </div>-->
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>身份证
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text"  id="idCard" value="${webAreaUser.idCard}" maxlength="100" placeholder="请先填写身份证" />
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span> 预约人数
              </div>
              <div class="xyg-comp-list-select-item-content">
                  <input type="text"  id="num" value="${webAreaUser.num}" maxlength="6" placeholder="请先填写预约人数" />
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>星期
              </div>
              <input type="hidden" id="weekDay" value="${webAreaUser.weekDay}"/>
              <div class="xyg-comp-list-select-item-icon"  id="weekDaySelect">
                      <span>
                          <#if webAreaUser.weekDay??>
                              <#list weekDayDictList as weekDayDict>
                              <#if weekDayDict.value == webAreaUser.weekDay>
                                  ${weekDayDict.name}
                              </#if>
                          </#list>
                              <#else>
                                  请选择星期
                          </#if>
                      </span>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xiangyou"></use>
                  </svg>
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>时间段
              </div>
              <input type="hidden" id="timeSlot" value="${webAreaUser.timeSlot}"/>
              <div class="xyg-comp-list-select-item-icon"  id="timeSlotSelect">
                      <span>
                          <#if webAreaUser.timeSlot??>
                              <#list timeSlotDictList as timeSlotDict>
                              <#if timeSlotDict.value == webAreaUser.timeSlot>
                                  ${timeSlotDict.name}
                              </#if>
                          </#list>
                              <#else>
                                  请选择时间段
                          </#if>
                      </span>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xiangyou"></use>
                  </svg>
              </div>
          </div>
          <div class="xyg-comp-list-select-item">
              <div class="xyg-comp-list-select-item-title">
                  <span style="color: #FF0000;">*</span>教室
              </div>
              <input type="hidden" id="classRoom" value="${webAreaUser.classRoom}"/>
              <div class="xyg-comp-list-select-item-icon"  id="classRoomSelect">
                      <span>
                          <#if webAreaUser.classRoom??>
                              <#list classRoomDictList as classRoomDict>
                              <#if classRoomDict.value == webAreaUser.classRoom>
                                  ${classRoomDict.name}
                              </#if>
                          </#list>
                              <#else>
                                  请选择教室
                          </#if>
                      </span>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xiangyou"></use>
                  </svg>
              </div>
          </div>

      </div>
      <div class="xyg-bottom">
          <button type="button" id="submitBtn" class="weui-btn weui-btn_warn">立即预约</button>
      </div>
  </div>
  <!--<div id="showSuccess" >
      <div class="weui-msg">
          <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
          <div class="weui-msg__text-area">
              <h2 class="weui-msg__title">申请成功，等待审核</h2>
              <p class="weui-msg__desc">您的信息已经提交审核<br/>我们会在1~3个工作日给您反馈<br/>请耐心等待！</p>
          </div>
          <div class="weui-msg__opr-area">
              <p class="weui-btn-area">
                  <a href="/phone/signUpList?memberId=${memberId}" class="weui-btn weui-btn_warn">确定</a>
              </p>
          </div>

      </div>
  </div>-->
  </div>
  <div  id="showSuccess" style="display: none;">
      <div style="width:12rem; height:12rem; background: #ffffff; top: 50%; left: 50%; margin:-6rem -6rem; border-radius: 1rem; position: relative;">
          <img src="${s.base}/mobile/images/icon_tc.png" style="width: 6rem; height: 6rem; position: absolute; top: -1.5rem; left: 3rem;"/>
          <div style=" position: absolute; top:4.5rem;width: 100%;height: 2rem; text-align: center; line-height: 2rem; color: #000000; font-size: 18px; font-weight: bold; ">资料提交成功</div>
          <div style=" position: absolute; top:6rem;width: 100%;height: 2rem; text-align: center; line-height: 2rem; color: #b3b3b3; font-size: 18px;  ">结果将在1-2工作日反馈</div>
          <div onclick="window.location.href='/phone/areaList?memberId=${memberId}'" style="width: 70%; height: 2rem; background: #ff5028; border-radius: 1rem; position: absolute; top: 9rem; left: 15%;text-align: center; line-height: 2rem; color: #ffffff; font-size: 18px;">我知道了</div>
      </div>
  </div>
  <style type="text/css">
      /*********弹窗开始***********/
      #showSuccess{position: fixed; top:0;left:0; width:100%; height:100%;background:rgba(0, 0, 0, 0.7);z-index:20000; }
      /**********弹窗结束***********/
      html,body{background:#f5f5f5;}
      .xyg-comp-list-select{width:100%; height:auto;}
      .xyg-comp-list-select .xyg-comp-pic{width:90%; padding:0.5rem 5%; background: #FFF;}
      .xyg-comp-list-select .xyg-comp-pic-title{width:100%;line-height:1.5rem; padding-bottom: 0.5rem; font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; }
      .xyg-comp-list-select .xyg-comp-pic-title-left{width: 50%; height: 6rem; float: left;}
      .xyg-comp-list-select .xyg-comp-pic-title-left img{width: 100%; height: 6rem;}
      .xyg-comp-list-select .xyg-comp-pic-title-right{width: 50%; height: 6rem; float: left;}
      .xyg-comp-list-select-item{width:90%; padding:0px 5%; line-height:2.2rem; height:2.2rem;font-size: 0.8rem; color:#000; letter-spacing: 0.01rem; background: #FFF; border: 0.001rem solid #f5f5f5;}
      .xyg-comp-list-select-item input::-webkit-input-placeholder {color: #999999;}
      .xyg-comp-list-select-item .xyg-comp-list-select-item-icon{width:70%; line-height:2rem; text-align:right; float:left; color: #999999;}
      .xyg-comp-list-select-item .xyg-comp-list-select-item-title{width:30%; height:2rem; text-align:left; float:left;}
      .xyg-comp-list-select-item .xyg-comp-list-select-item-content{width:70%; height:2rem; text-align:left; float:left;}
      .xyg-comp-list-select-item .xyg-comp-list-select-item-content input{width:100%; height:2rem; line-height:2rem;background-color:transparent;border:0; text-align:right;}
      .xyg-comp-xy{height:2rem; line-height:2rem; width:width:93%; margin:0px 2% 0px 5%;}
      .xyg-bottom{width:90%; height:auto;  margin:1.5rem 5%;}
  </style>
  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
  <script src="${s.base}/mobile/js/jquery-weui.js"></script>
  <script src="${s.base}/mobile/js/dateUtil.js"></script>
  <script src="${s.base}/mobile/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/lib/Mdate/iScroll.js"></script>
  <script src="${s.base}/mobile/lib/Mdate/Mdate.js"></script>
  <script type="text/javascript" src="${s.base}/mobile/js/ajaxfileupload.js"></script>
  <script type="text/javascript">
      var areaId='${webArea.id}';
      var memberId='${memberId}';
      $("#weekDaySelect").select({
          title: "选择星期",
          items:${webWeekDay},
          onClose: function (d) {
              $("#weekDay").val(d.data.values);
              $("#weekDaySelect span").html(d.data.titles);
          }
      });
      $("#classRoomSelect").select({
          title: "选择教室",
          items:${webClassRoot},
          onClose: function (d) {
              $("#classRoom").val(d.data.values);
              $("#classRoomSelect span").html(d.data.titles);
          }
      });
      $("#timeSlotSelect").select({
          title: "选择时间段",
          items:${webTimeSolt},
          onClose: function (d) {
              $("#timeSlot").val(d.data.values);
              $("#timeSlotSelect span").html(d.data.titles);
          }
      });
      $("#startDate").datetimePicker({
          title: '开始时间选择',
          yearSplit: '-',
          monthSplit: '-',
          dateSplit: '',
          times: function () {
              return [  // 自定义的时间
                  {
                      values: (function () {
                          var hours = [];
                          for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
                          return hours;
                      })()
                  },
                  {
                      divider: true,  // 这是一个分隔符
                      content: ':'
                  },
                  {
                      values: (function () {
                          var minutes = [];
                          for (var i=0; i<59; i++) minutes.push(i > 9 ? i : '0'+i);
                          return minutes;
                      })()
                  },
                  {
                      divider: true,  // 这是一个分隔符
                      content: ''
                  }
              ];
          },
          onChange: function (picker, values, displayValues) {
              console.log(values);
          }
      });
      $("#endDate").datetimePicker({
          title: '结束时间选择',
          yearSplit: '-',
          monthSplit: '-',
          dateSplit: '',
          times: function () {
              return [  // 自定义的时间
                  {
                      values: (function () {
                          var hours = [];
                          for (var i=0; i<24; i++) hours.push(i > 9 ? i : '0'+i);
                          return hours;
                      })()
                  },
                  {
                      divider: true,  // 这是一个分隔符
                      content: ':'
                  },
                  {
                      values: (function () {
                          var minutes = [];
                          for (var i=0; i<59; i++) minutes.push(i > 9 ? i : '0'+i);
                          return minutes;
                      })()
                  },
                  {
                      divider: true,  // 这是一个分隔符
                      content: ''
                  }
              ];
          },
          onChange: function (picker, values, displayValues) {
              console.log(values);
          }
      });

      $("#submitBtn").on("click",function(){
          var id = $("#id").val();

          var startDate = $("#startDate").val();
          if(startDate == null || startDate == "") {
              $.toast("请选择开始时间", "text");
              return false;
          }
          var endDate = $("#endDate").val();
          if(endDate == null || endDate == "") {
              $.toast("请选择结束时间", "text");
              return false;
          }
          var userName = $("#userName").val();
          if(userName == null || userName == "") {
              $.toast("请输入姓名", "text");
              return false;
          }

          var phone = $("#phone").val();
          if(phone == null || phone == "") {
              $.toast("请输入手机号", "text");
              return false;
          }
          var regPhone = /^((1[2|3|4|5|6|7|8|9][0-9]{9})|([0-9]{12}))$/;
          if(regPhone.test(phone) === false){
              $.toast("手机号输入错误", "text");
              return  false;
          }
          var idCard = $("#idCard").val();
          if(idCard == null || idCard == "") {
              $.toast("请输入身份证号", "text");
              return false;
          }
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if(reg.test(idCard) === false){
              $.toast("身份证输入不合法", "text");
              return  false;
          }
          var num = $("#num").val();
          if(num == null || num == "") {
              $.toast("请输入预约人数", "text");
              return false;
          }
          var weekDay = $("#weekDay").val();
          if(weekDay == null || weekDay == "") {
              $.toast("请选择星期几", "text");
              return false;
          }
          var timeSlot = $("#timeSlot").val();
          if(timeSlot == null || timeSlot == "") {
              $.toast("请选择时间段", "text");
              return false;
          }
          var classRoom = $("#classRoom").val();
          if(classRoom == null || classRoom == "") {
              $.toast("请选择教室", "text");
              return false;
          }
          var param = {weekDay:weekDay,timeSlot:timeSlot,classRoom:classRoom,id:id,areaId:areaId,memberId:memberId,startDateStr:startDate,userName:userName,endDateStr:endDate,
              phone:phone,idCard:idCard,num:num};
          $.showLoading("正在提交中");
          $.post("/phone/areaUpSave",param,function(result){
              if(0==result.code){
                  $.hideLoading();
                 $("#showContent").hide();
                  $("#showSuccess").show();
              }else{
                  $.hideLoading();
                  $.alert(result.msg);
              }
          },"json");
      });

  </script>
</html>

